<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<h1 align="center">留言板</h1>
<a href="./add.html" class="layui-btn">增加留言</a>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<h1 align="center">最新留言</h1>
<table id="hotMsg"></table>
</body>

</html>
<script src="./layui/layui.js"></script>
<script>
    layui.use(['table','jquery','laypage'], function(){
        var table = layui.table,
        laypage = layui.laypage,
        $ = layui.jquery;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: './deal.php?action=index' //数据接口
            ,page: {
                limit:2
            } //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '用户名', width:80,edit:'text'}
                ,{field: 'content', title: '文章类容', width:200}
                ,{field: 'create_time', title: '留言时间', width:200}
                ,{fixed: 'right', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });

        //最最新留言
        table.render({
            elem: '#hotMsg'
            ,height: 312
            ,url: './deal.php?action=index' //数据接口
            ,page:false
            ,limit:10
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '用户名', width:80,edit:'text'}
                ,{field: 'content', title: '文章类容', width:200}
                ,{field: 'create_time', title: '留言时间', width:200}
            ]]
        });
    });
</script>